<template>
  <!-- 车源信息页 -->
  <div class="box">
    <heads></heads>
    <tools></tools>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
        </div>
        <div @click="toJump(2, 2)">二手车</div>
        <div @click="toJump(2, 1)">到店新车</div>
        <div @click="toJump(2, 3)">在售车系</div>
        <div class="sousuo">
          <input type="text" v-model="searchtext" @keyup.enter="search" placeholder="请输入关键字搜索" />
          <p class="el-icon-search" @click="search()"></p>
        </div>
        <downloadAppBtn></downloadAppBtn>
      </div>
    </div>
    <div style="width: 100%; height: 60px"></div>
    <transition name="fade">
      <div class="swiper-btn-control-wrap center">
        <div class="swiper-btn-control btn-control1" @click.stop="prev">
          <span class="el-icon-arrow-left btn-control"></span>
        </div>
        <div class="swiper-btn-control btn-control2" @click.stop="next">
          <span class="el-icon-arrow-right btn-control"></span>
        </div>
        <div @touchend="end" @touchstart="start" @touchmove="move" class="swiper">
          <div v-for="(item, index) in imgs" :style="config5[index]" :key="item.cover" @mouseover="swiper = false"
            @mouseleave="swiper = true" class="swiperclass">
            <img :src="item.cover" style="width: 100%; height: 100%; cursor: pointer" @click="chooseItem(item, index)" />
          </div>
          <div class="swiper-button-prev" @click="prev" style="color: '#64b6a8!important'"></div>
          <div class="swiper-button-next" @click="next" style="color: '#64b6a8!important'"></div>
        </div>
      </div>
    </transition>
    <div style="width: 100%; height: 60px"></div>
    <div class="bottom" style="">
      <div class="tit">推荐车源</div>
      <div class="list">
        <div class="li" v-for="(item, index) in HousesList" :key="index">
          <img class="biao" @click="details(item)" style="
                object-fit: contain;
                cursor: pointer;
                background-color: #00000033;
              " :src="item.vehicleCoverPicture
                ? item.vehicleCoverPicture
                : $img + item.houseImageDiv
                " />

          <div class="name" @mouseleave="chuqu(item)" @mouseenter="jiaruJin1(item)">
            <div class="t_1" style="cursor: pointer; color: #333" @click="details(item)">
              <tag-view :item="item"></tag-view>
              {{
                item.vehicleBrandModel
                ? (item.vehicleBrandModel.split("|")[0] || "") +
                " " +
                (item.vehicleBrandModel.split("|")[1] || "")
                : ""
              }}
              {{ item.model ? item.model + "/" : "" }}
              {{
                item.bodyStructureDoors +
                "门" +
                item.bodyStructureSeat +
                "座" +
                item.bodyStructureVehicle +
                "车"
              }}
            </div>
            <img class="t_1_1" v-if="jiaruXuan1 == item && !item.houseContrast" @click.stop="jiaruChu1(item.id)"
              src="../../assets/duibi1.png" />
            <img class="t_1_1" v-if="jiaruXuan1 == item && item.houseContrast" @click.stop="duibiqx(item.id)"
              src="../../assets/qxduibi.png" />
            <div class="t_2" style="cursor: pointer" @click="details(item)">
              <span style="margin-right: 5px">{{
                item.mileage
                ? +item.mileage >= 10000
                  ? +(item.mileage / 10000).toFixed(1) + "万公里/"
                  : item.mileage + "公里/"
                : ""
              }}{{
  item.licensingTimeYear ? item.licensingTimeYear + "年" : ""
}}</span>
            </div>
            <div class="t_4">
              <img style="cursor: pointer" @click="toAgent(item)" :src="item.userInformation
                  ? item.userInformation.image ||
                  'https://pic.bangbangtongcheng.com/static/my/header.png'
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                " />
              <span @click="toAgent(item)" style="cursor: pointer">{{
                item.userInformation
                ? item.userInformation.nikeName || "未命名用户"
                : "未命名用户"
              }}</span>

              <div @click="shopdetails(item)" style="cursor: pointer">
                {{ item.distributor ? item.distributor.storeName : "个人车源" }}
              </div>
            </div>
          </div>
          <div class="qian">
            <p class="p1">
              {{
                item.intervalPrice && item.intervalPrice != ""
                ? item.intervalPrice.indexOf("-") > -1
                  ? item.intervalPrice.split("-")[0] +
                  "万-" +
                  item.intervalPrice.split("-")[1] +
                  "万"
                  : ""
                : item.price + "万"
              }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="gotop" @click="toTop" v-show="showToTop" style="left: calc(100vw / 2 + 600px);;">
      <img src="@/assets/top.png" />返回顶部
    </div>
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="Housestotal" :current-page="HousesPage.PageNo"
        :page-size="HousesPage.pageSize" @current-change="HousesCurrentChange" v-if="!searchState"></el-pagination>
      <el-pagination @current-change="searchCurrentChange" background layout="prev, pager, next" :total="searchTotal"
        :current-page="searchPage.PageNo" :page-size="searchPage.pageSize" v-else></el-pagination>
    </div>

    <floor></floor>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import tools from "../../components/tools";
import BbczItem from "./comp/bbcz-item.vue";
export default {
  components: {
    floor,
    heads,
    tools,
    BbczItem
  },
  data() {
    return {
      showToTop: false,
      searchtext: "",
      checkedCities: [],
      HousesList: [],
      HousesPage: {
        pageNo: 1,
        pageSize: 10,
        upStatus: 1,
        examineStatus: 2,
        isLz: "0",
        orderSort: "1"
      },
      Housestotal: 0,
      HousesList: [],
      Housestotal: 0,
      // 卡片轮播
      loading: true,
      currentIndex: 3, //当前中间imgs数组中index
      centerInfo: "", // 当前中间信息
      startX: "",
      endX: "",
      imgs: [],
      previous: 0,
      config5: [
        {
          id: "-A",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "0",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        },
        {
          id: "A",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "8%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "B",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "20%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "center",
          position: "absolute",
          width: "360px",
          height: "240px",
          top: "0px",
          left: "calc(100% - 50% - 180px)",
          // marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s"
        },
        {
          id: "D",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "calc(100% - 20% - 323px)",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "E",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "calc(100% - 8% - 290px)",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "E+",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "calc(100% - 243px)",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        }
      ],
      //搜索分页
      searchPage: {
        pageNo: 1,
        pageSize: 10
      },
      //搜索结果
      searchList: [],
      searchTotal: 0,
      searchState: false,
      bannerList: [],
      t1: "",
      swiper: true,
      //
      loginstate: false,
      jiaruXuan: "",
      jiaruXuan1: "",
      isshow: false
    };
  },
  created() {
    this.init();
    this.getData();
    this.centerCard(); // 获取中间卡片信息
    this.addCardStyle(); // 加入样式位置的index
    window.addEventListener("scroll", this.handleScroll);
  },
  mounted() {
    this.t1 = setInterval(() => {
      if (this.swiper) {
        this.next();
      }
    }, 4000);
  },
  beforeDestroy() {
    clearInterval(this.t1);
  },
  methods: {
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.showToTop = true) : (this.showToTop = false);
      console.log(scrolltop, 11111);
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    duibiqx(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.quxiaoduibi(id);
    },
    quxiaoduibi(id) {
      let contrastIdList = JSON.parse(
        localStorage.getItem("contrastIdList-cz")
      );
      for (var i = 0; i < contrastIdList.length; i++) {
        if (contrastIdList[i] == id) {
          contrastIdList.splice(i, 1);
        }
      }
      localStorage.setItem("contrastIdList-cz", JSON.stringify(contrastIdList));
      this.HousesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = false;
        }
      });

      this.$message({
        message: "已取消对比！",
        type: "error",
        offset: 120,
        duration: 2000
      });
    },
    jiaru(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.jiaruduibi(id);
    },
    jiaruChu() {
      console.log("11");
      this.jiaruXuan = "";
    },
    jiaruChu1(id) {
      if (!this.loginstate) {
        this.myErrorMessage("请登录!");
        return false;
      }
      this.jiaruXuan1 = "";
      this.jiaruduibi(id);
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation(); //阻止冒泡
    },
    jiaruJin1(num) {
      this.jiaruXuan1 = num;
      this.isshow = true;
    },
    chuqu() {
      this.jiaruXuan1 = "";
    },
    jiaruduibi(id) {
      let contrastIdList = JSON.parse(
        localStorage.getItem("contrastIdList-cz")
      );
      if (contrastIdList && contrastIdList.length >= 4) {
        this.$message({
          message: "最多4辆进行对比",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (contrastIdList == null) {
        let list = [id];
        localStorage.setItem("contrastIdList-cz", JSON.stringify(list));
      } else {
        contrastIdList.push(id);
        localStorage.setItem(
          "contrastIdList-cz",
          JSON.stringify(contrastIdList)
        );
      }
      this.HousesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = true;
        }
      });
      this.$message({
        message: "已加入对比！",
        type: "success",
        offset: 120,
        duration: 2000
      });
    },
    init() {
      this.getUser();
      this.getVehicleSource();
      this.getBanner();
    },
    getVehicleSource() {
      this.$getHttp("/api/mobile/vehicleOwner/getVehicleSource", {
        pageNo: this.HousesPage.pageNo,
        pageSize: this.HousesPage.pageSize
      }).then(data => {
        const contrastIdList = JSON.parse(
          localStorage.getItem("contrastIdList-cz")
        );
        //处理楼层信息
        data.vehicleSourceList.pageList.forEach(e => {
          if (contrastIdList != null) {
            e.houseContrast = false;
            contrastIdList.forEach(el => {
              if (el == e.id) {
                e.houseContrast = true;
              }
            });
          }
          if (e.hasOwnProperty("floor")) {
            if (e.floor.indexOf("|") == -1) {
              e.foors = "";
            } else {
              e.foors =
                e.floor.split("|")[0] +
                "层/" +
                "共" +
                e.floor.split("|")[1] +
                "层";
            }
          }
          if (!e.hasOwnProperty("shop_name")) {
            e.shop_name = "个人房源";
          }
          if (e.hasOwnProperty("createDate")) {
            e.showYear = new Date(e.createDate || e.updateDate).getFullYear();
          }
        });
        // data.vehicleSourceList.pageList.sort(function(a,b){
        // 	console.log(a.update_date||a.create_date - b.update_date||b.create_date)
        // 	return (b.update_date||b.create_date) - (a.update_date||a.create_date)
        // })
        //
        console.log(data.list);
        this.HousesList = data.vehicleSourceList.pageList;
        this.Housestotal = data.vehicleSourceList.pageCount;
      });
    },

    //获取房源推荐信息
    getHouseInfo() {
      this.$getHttp("/mob/home/getHouseInfo", this.HousesPage).then(data => {
        if (data.code == 200) {
          //处理楼层信息
          data.list.forEach(e => {
            //判断该对象是否存在该属性
            // if ("FLOOR" in e) {
            //   e.foors = this.floor(e.FLOOR);
            // }
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });

          // yykk
          const contrastIdList = JSON.parse(
            localStorage.getItem("contrastIdList-cz")
          );
          //处理楼层信息
          data.list.forEach(e => {
            if (contrastIdList != null) {
              e.houseContrast = false;
              contrastIdList.forEach(el => {
                if (el == e.id) {
                  e.houseContrast = true;
                }
              });
            }
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          //
          console.log(data.list);
          this.HousesList = data.list;
          this.Housestotal = data.count;
        }
      });
    },
    //获取首页广告
    getBanner() {
      this.$getHttp("/api/mobile/vehicleOwner/getCarouselChartsByType", {
        carouselType: "2",
        type: 3
      }).then(data => {
        if (data.code == 200) {
          data.carouselChartsList.pageList.forEach(e => {
            this.bannerList.push(e);
            this.imgs.push({
              index: e.sort - 1,
              cover: e.picturePath
            });
          });
          this.addCardStyle();
        }
      });
    },
    //获取搜索结果
    getSearchInfo() {
      this.$getHttp("/mob/home/getHouseInfo", this.searchPage).then(data => {
        if (data.code == 200) {
          //处理楼层信息
          data.list.forEach(e => {
            e.foors = this.floor(e.FLOOR);
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          this.searchList = data.list;
          this.searchTotal = data.count;
          this.searchState = true;
        }
      });
    },
    details(item) {
      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id
        }
      });
    },

    HousesCurrentChange(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.HousesPage.pageNo = e;
      this.getVehicleSource();
      // this.getHouseInfo();
    },
    searchCurrentChange(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.searchPage.pageNo = e;
      this.getVehicleSource();
      // this.getSearchInfo();
    },

    search() {
      if (this.searchtext.trim() != "") {
        // const routeLink = this.$router.resolve({
        //   path: "/index/newSource?search=" + this.searchtext,
        // });
        // window.open(routeLink.href, "_blank");
        this.openUrl({
          path: "/index/newSource",
          query: {
            search: this.searchtext
          }
        });
      }
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    toJump(type, old) {
      this.openUrl({
        path: "/index/newSource",
        query: {
          transactionType: type,
          newOld: old
        }
      });
    },
    async getData() {
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 滑动上一个
    prev(index) {
      // this.imgs.unshift(this.imgs.pop());
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerCard();
      this.centerIndex("prev");
    },
    // 滑动下一个
    next() {
      // this.imgs.push(this.imgs.shift());
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      this.centerIndex("next");
      // console.log(this.currentIndex);
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      if (this.interval > 40) {
        this.startX = this.endX;
        this.prev();
      }
      if (this.interval < -40) {
        this.startX = this.endX;
        this.next();
      }
    },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
      // this.endY = event.changedTouches[0].clientY;
      // this.endX = event.changedTouches[0].clientX;
      // this.formatSwiper();
    },
    formatSwiper() {
      if (this.startX > this.endX) {
        console.log("左边滑动");
        if (this.startX > this.endX + 40) {
          this.next();
        }
      } else {
        console.log("右边滑动");
        if (this.endX > this.startX + 40) {
          this.prev();
        }
      }
    },
    // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
    stopDefault(event) {
      let differenceY = this.endY - this.startY;
      let differenceX = this.endX - this.startX;
      if (Math.abs(differenceX) > Math.abs(differenceY)) {
        event.preventDefault();
      }
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == "prev") {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    // 点击
    chooseItem(item, index) {
      this.bannerList.forEach(el => {
        if (item.cover == el.picturePath) {
          el.bid = 2;
          localStorage.setItem("banner", JSON.stringify(el));
          // this.openUrl({
          //   path: "/index/particulars",
          //   query: {
          // 		type:'banner'
          //   },
          // });
          const routeLink = this.$router.resolve({
            path: "/index/particulars?type=banner"
          });
          window.open(routeLink.href, "_blank");
        }
      });
      // let cycles = item.index;
      // if (item.index < 3) {
      //   for (let i = 0; i < 3 - cycles; i++) {
      //     console.log(item.index);
      //     this.prev();
      //   }
      //   console.log("1");
      // } else if (item.index > 3) {
      //   for (let i = -1; i < item.index - 3; i++) {
      //     this.next();
      //   }
      //   console.log("2");
      // } else if (item.index == 3) {
      //   console.log("3");
      // 	this.imgs.forEach((e) =>{
      // 		if(e.index == 3){
      // 			this.bannerList.forEach((el) =>{
      // 				if(e.cover == (this.$img+el.image)){
      // 					localStorage.setItem("banner",JSON.stringify(el))
      // 					this.openUrl({
      // 					  path: "/index/particulars",
      // 					  query: {
      // 							type:'banner'
      // 					  },
      // 					});
      // 				}
      // 			})
      // 		}
      // 	})
      // }
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgs[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
      // this.$emit('centerInfo', this.centerInfo);
      // console.log(this.imgs[2].id);
    },

    addCardStyle() {
      if (this.imgs.length > 7) {
        let addtime = this.imgs.length - 7;
        for (let i = 0; i < addtime; i++) {
          console.log("add");
          this.config5.push({
            id: "center",
            position: "absolute",
            width: "45%",
            height: "100%",
            top: "0px",
            left: "50%",
            marginLeft: "-22.5%",
            opacity: 0,
            transition: ".1s"
          });
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.swiperclass {
  margin-top: 10px;
  // box-shadow: rgba(181, 181, 181, 0.3) 0px 10px 16px 0px;
  box-shadow: 0px 0px 10px 8px rgba(181, 181, 181, 0.3);
  // border: 2px solid rgb(214, 210, 210);
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
        border-radius: 10px;
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          font-size: 26px;
          cursor: pointer;

          .t_1_1 {
            position: absolute;
            width: 130px;
            height: 58px;
            top: 30px;
            z-index: 999999;
            //top: 30px;
            //right: 20px;
          }
        }

        .t_1_1 {
          position: absolute;
          left: 120px;
          width: 130px;
          height: 58px;
          top: 30px;
          z-index: 999999;
          //top: 30px;
          //right: 20px;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;
          white-space: nowrap;

          img {
            vertical-align: top;
            width: 31px;
            height: 31px;
            border-radius: 50%;
          }

          div {
            display: inline-block;
            //width: 90px;
            padding: 0px 5px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;

        .p1 {
          //width: 120px;
          font-size: 32px;
          color: #e00000;
          text-align: center;
        }

        .p2 {
          //width: 120px;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.swiper {
  position: relative;
  width: 1200px;
  height: 270px;
  overflow: hidden;
  margin-left: 50%;
  transform: translateX(-50%);
}

/deep/.swiper-button-prev,
.swiper-button-next {
  color: #64b6a8;
}

.gotop {
  position: fixed;
  width: 85px;
  height: 33px;
  line-height: 34px;
  box-sizing: border-box;
  padding-left: 30px;
  right: calc((100vw / 2) - 600px);

  bottom: 77px;
  background-color: #fff;
  border-radius: 17px;
  font-size: 12px;
  box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.16);
  color: #000;
  z-index: 9999999;
  cursor: pointer;

  img {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 23px;
    height: 23px;
  }
}
</style>
